<template>
	<div style="margin-top: 50px" v-loading="loading">
		<p class="fs_large text-center mbl-3 c-suc">
			<img
				src="@/assets/success.svg"
				class="block mbl-3 mil-auto"
				width="60px"
			/>
			出单成功
		</p>
		<div class="mbl-3 text-center">
			<el-button type="primary" @click="showElectronicPolicy = true"
				>查看电子保单</el-button
			>
		</div>
		<div v-if="orderInfo">
			<div class="c-main text-center">保障详情</div>
			<gridbox columns="1fr 1fr" class="info-box">
				<gridbox columns="auto 1fr" gap="12px">
					<span>产品名称：</span>
					<span>{{ orderInfo.business.productName }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>投保计划：</span>
					<span>{{ orderInfo.business.periodText }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>是否投保附加险：</span>
					<span>{{ orderInfo.business.extraText }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>家政人员服务类型：</span>
					<span>{{ orderInfo.business.jobText }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>保险期间：</span>
					<span>{{ orderInfo.business.day }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>生效起始日：</span>
					<span>{{ orderInfo.business.startTime }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>生效终止日：</span>
					<span>{{ orderInfo.business.endTime }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>下单时间：</span>
					<span>{{ orderInfo.business.createTime }}</span>
				</gridbox>
			</gridbox>

			<div class="c-main text-center">投保人信息</div>
			<gridbox columns="1fr 1fr" class="info-box">
				<gridbox columns="auto 1fr" gap="12px">
					<span>姓名：</span>
					<span>{{ orderInfo.holder.name }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>性别：</span>
					<span>{{ orderInfo.holder.gender }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>出生日期：</span>
					<span>{{ orderInfo.holder.birthday }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>证件类型：</span>
					<span>{{ convertIdType(orderInfo.holder.idType) }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>证件号码：</span>
					<span>{{ orderInfo.holder.idNum }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span class="text-nowrap">常住地区：</span>
					<span>{{
						orderInfo.holder.province +
						orderInfo.holder.city +
						orderInfo.holder.district +
						' ' +
						orderInfo.holder.detailAddress
					}}</span>
				</gridbox>
			</gridbox>
			<div class="c-main text-center">家政人员信息</div>
			<gridbox columns="1fr 1fr" class="info-box">
				<gridbox columns="auto 1fr" gap="12px">
					<span>姓名：</span>
					<span>{{ orderInfo.subjects?.[0]?.name }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>证件类型：</span>
					<span>{{ convertIdType(orderInfo.subjects?.[0]?.idType) }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>证件号码：</span>
					<span>{{ orderInfo.subjects?.[0]?.idNum }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span class="text-nowrap">服务地址：</span>
					<span>{{
						orderInfo.subjects?.[0]?.province +
						orderInfo.subjects?.[0]?.city +
						orderInfo.subjects?.[0]?.district +
						' ' +
						orderInfo.subjects?.[0]?.detailAddress
					}}</span>
				</gridbox>
			</gridbox>
			<div class="c-main text-center">支付信息</div>
			<gridbox columns="1fr 1fr" class="info-box">
				<gridbox columns="auto 1fr" gap="12px">
					<span>支付方式：</span>
					<span>{{ orderInfo.pay.account }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>支付金额：</span>
					<span>{{ orderInfo.pay.amount }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>支付流水号：</span>
					<span>{{ orderInfo.pay.voucher }}</span>
				</gridbox>
				<gridbox columns="auto 1fr" gap="12px">
					<span>支付时间：</span>
					<span>{{ orderInfo.pay.payTime }}</span>
				</gridbox>
			</gridbox>
		</div>

		<el-dialog
			:visible.sync="showElectronicPolicy"
			title="电子保单"
			width="400px"
			append-to-body
		>
			<div class="mbl-2 c-main" v-for="dianzi in dianziArr" :key="dianzi.num">
				<a :href="dianzi.policyUrl" target="_blank">{{ dianzi.num }}</a>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { queryH5Order, electronicPolicy } from '@/api/order'
export default {
	props: {
		businessId: [Number, String]
	},
	data() {
		return {
			orderInfo: null,
			dianziArr: [],
			showElectronicPolicy: false
		}
	},
	computed: {},
	mounted() {
		this.fetchOrder()
		electronicPolicy({ businessId: this.businessId }).then(({ data }) => {
			this.dianziArr = data
		})
	},
	methods: {
		// 订单信息
		async fetchOrder() {
			this.loading = true
			const { data: orderInfo } = await queryH5Order({
				businessId: this.businessId
			})

			const { business, holder, subjects, sign, pay } = orderInfo

			const [periodText, version, jobText, extraValue] =
				business.planName.split('-')
			const extraText = extraValue == '基础' ? '否' : '是'

			this.orderInfo = {
				business: {
					periodText,
					version,
					extraText,
					jobText,
					...business
				},
				sign,
				pay,
				holder: holder || {},
				subjects
			}
			this.loading = false
		},
		convertIdType(value) {
			return [
				{ text: '身份证', value: 0 },
				{ text: '护照', value: 2 },
				{ text: '外国人永久居留身份证', value: 11 },
				{ text: '武警身份证', value: 7 },
				{ text: '港澳通行证', value: 9 },
				{ text: '驾驶证', value: 14 },
				{ text: '港澳回乡证或台胞证', value: 8 },
				{ text: '临时身份证', value: 15 },
				{ text: '港澳台居民居住证', value: 10 },
				{ text: '社会统一信用代码证', value: 99 }
			].find((v) => v.value == value)?.text
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.wrapper {
	padding: 20px;
}
.box-card {
	margin-bottom: 20px;
}
.info-box {
	border-radius: 12px;
	max-width: 688px;
	padding: 15px;
	background-color: #f0f3fc;
	margin: 12px auto;
}
.box {
	padding: 20px;
}
.shadow {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.field-cont {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: start;

	.field {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: start;
		&__title {
			white-space: nowrap;
			min-width: 120px;
		}
		&--block {
			grid-column: -1 / 1;
		}
		&--strong {
			.field__title {
				font-weight: 600;
			}
		}
	}
}
</style>
